<template>
	<div>
		<van-nav-bar title="购物车" />

		<van-checkbox-group
			v-model="checkeds"
			ref="checkboxGroup"
			v-if="isList">
			<div
				style="
					display: flex;
					width: 100%;
					padding: 0 5px;
					justify-content: space-between;
					margin-bottom: 5px;
				"
				v-for="shop in cart"
				:key="shop.id">
				<van-checkbox :name="shop.id"> </van-checkbox>
				<van-swipe-cell>
					<van-card
						:price="shop.total"
						:desc="'库存：:' + shop.product.stock"
						:title="shop.product.name"
						class="goods-card">
						<template #tags>
							<div>单价: {{ shop.price }}</div>
						</template>
						<template #num>
							<van-stepper
								:disabled="issetp"
								:name="shop"
								@change="ChangeNum"
								v-model="shop.nums"
								integer
								min="1" />
						</template>
						<template #thumb>
							<img
								@click.stop="gotoInfo(shop.proid)"
								:src="shop.product.thumb_swiper" />
						</template>
					</van-card>
					<template #right>
						<van-button
							square
							text="删除"
							@click="del(shop.id, shop.product.id)"
							type="danger"
							class="delete-button" />
					</template>
				</van-swipe-cell>
			</div>
		</van-checkbox-group>
		<!-- 没有就显示 -->
		<div
			class="gwcbox"
			v-else>
			<div class="gwckbox">
				<div class="T1">
					<img src="assets/images/kgwc.png" />
					<p>购物车还是空的</p>
				</div>
				<div class="T2">再忙也不能亏待自己啦，快去挑选好货吧~</div>
				<router-link to="/">逛一逛</router-link>
			</div>
		</div>

		<van-submit-bar
			:price="total"
			button-text="提交订单"
			@submit="onSubmit"
			v-if="isList">
			<van-checkbox v-model="checked">全选</van-checkbox>
		</van-submit-bar>

		<Footer></Footer>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import Footer from "components/common/Footer.vue";
	import { showDialog, showFailToast, showSuccessToast, showToast } from "vant";
	export default {
		created() {
			this.Cart();
		},
		data() {
			return {
				// 初始信息
				cart: null,
				// 步进器防抖
				st: null,
				// 步进器禁用
				issetp: false,
				// 选中了的id会添加到数组内
				checkeds: [],
				// 全选按钮
				checked: false,
				// 总价
				total: 0,
				isList: true,
				isLoading: false
			};
		},
		methods: {
			// 初始购物车
			async Cart() {
				this.isLoading = true;
				let res = await this.$api.ShopCart({
					busid: this.$cookies.get("User").id,
				});
				// 判断是否被响应拦截器拦截
				if (res.code != 1) {
					showFailToast({ message: res.msg });
				}
				this.cart = res.data;
				if (res.data.length == 0) {
					this.isList = false;
				}

				this.isLoading = false;
			},
			// 增加商品
			async ChangeNum(val, val2) {
				this.isLoading = true;
				this.issetp = true;
				if (!this.st) {
					this.st = setTimeout(() => {
						this.isLoading = true;
						let res = this.$api.AddShop({
							id: val2.name.id,
							num: val,
							proid: val2.name.proid,
							busid: this.$cookies.get("User").id,
						});
						if (res.code != 1) {
							showToast(res.msg);
						}
						this.issetp = false;
						this.st = null;
						// 刷新页面
						this.$router.go(-1);
						this.isLoading = false;

					}, 1000);
				}
			},
			// 移除商品
			async del(id, proid) {
				let _this = this;
				showDialog({
					title: "删除",
					message: "真的要删除吗？",
					showCancelButton: true,
				}).then(async () => {
					this.isLoading = true;
					let res = await _this.$api.DelCart({ busid: _this.$cookies.get("User").id, id, proid });

					if (res.code == 1) {
						showSuccessToast({ message: res.msg });
						_this.Cart();
					}else{
						showFailToast({ message: res.msg });
					}

					this.isLoading = false;
				});
			},
			// 点击商品跳转至详情页面
			gotoInfo(id) {
				this.$router.push({ path: "/list/shop", query: { proid: id } });
			},
			// 提交数据
			onSubmit() {
				if (this.checkeds.length == 0) {
					showToast("请勾选需要的商品哦！");
					return;
				}

				this.$router.push({
					path: "/shopcart/buy",
					query: { buyId: this.checkeds.toString() },
				});
			},
		},
		components: {
			Footer,
		},
		computed: {
			// 计算总价
			total() {
				let to = 0;
				this.checkeds.forEach((el) => {
					this.cart.forEach((el2) => {
						if (el == el2.id) {
							to = parseFloat(el2.total) + parseFloat(to);
						}
					});
				});
				return to * 100;
			},
		},
		watch: {
			checked(newVlue) {
				if (newVlue) {
					this.cart.forEach((element) => {
						if (!this.checkeds.includes(element.id)) {
							this.checkeds.push(element.id);
						}
					});
				} else {
					if (this.checkeds.length != this.cart.length) {
						return;
					}
					this.checkeds = [];
				}
			},
			checkeds: {
				handler(newval) {
					if (newval.length == this.cart.length) {
						this.checked = true;
						return;
					}
					this.checked = false;
				},
				deep: true,
			},
		},
	};
</script>

<style scoped>
	.van-swipe-cell {
		width: 95%;
	}

	.van-swipe-cell__right button {
		height: 100%;
	}

	.van-submit-bar {
		bottom: 50px;
		border-bottom: 1px solid #000;
	}
</style>
